<template>
  <div id="Statistics">
    <div v-show="true" style="margin-top: 10px">
      <a-divider>年报数据统计</a-divider>
      <a-form class="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="年份">
          <a-input-group compact>
            <a-select
              autoFocus
              v-model="particularYear"
              placeholder="选择年份"
              style="width: 100%"
              @change="selectYearChange"
            >
              <a-select-option
                v-for="(d, index) in Statisticsdata"
                :key="index"
              >
                {{
                  d[DatasourceFN].substring(
                    d[DatasourceFN].length - 4,
                    d[DatasourceFN].length
                  )
                }}
              </a-select-option>
            </a-select>
            <!-- <a-button><a-icon type="pie-chart" /></a-button> -->
          </a-input-group>
        </a-form-item>
        <a-form-item label="类型">
          <a-select
            placeholder="选择统计类型"
            v-model="datatypesname"
            style="width: 100%"
            @change="datatypesChange"
            allowClear
          >
            <a-select-option v-for="(item, index) in datatypes" :key="index">
              {{ item["datasetType"] }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="要素" v-show="false">
          <a-select
            placeholder="选择要素"
            v-model="datasetName"
            style="width: 100%"
            @change="datasetNameChange"
            allowClear
          >
            <a-select-option value="all"> 所有 </a-select-option>
            <a-select-option
              v-for="(item, index) in datasetNameList"
              :key="index"
            >
              {{ item[datasetCNameFN] }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="字段" v-show="!isShowFiled">
          <a-input-group compact>
            <a-select
              placeholder="选择统计字段"
              v-model="filedname"
              style="width: 100%"
              @change="filednameChange"
              :disabled="isShowFiled"
            >
              <a-select-option
                v-for="(item, index) in filednameList"
                :key="index"
              >
                {{ item[filedCNameFN] }}
              </a-select-option>
            </a-select>
            <!-- <a-button :disabled="datasetName">
              <a-icon type="pie-chart" />
            </a-button> -->
          </a-input-group>
        </a-form-item>
        <a-form-item label="图表">
          <a-input-group compact>
            <a-select
              placeholder="选择图表类型"
              v-model="chartType"
              style="width: 100%"
              @change="chartTypeChange"
            >
              <a-select-option value="line"> 折线 </a-select-option>
              <a-select-option value="bar"> 柱状 </a-select-option>
              <a-select-option value="pie"> 饼图 </a-select-option>
              <a-select-option value="table"> 表格 </a-select-option>
            </a-select>
            <!-- <a-button :disabled="datasetName">
              <a-icon type="pie-chart" />
            </a-button> -->
          </a-input-group>
        </a-form-item>
        <a-button-group style="float: right">
          <a-button class="statistics-btn" type="primary" @click="statistics">
            统计
          </a-button>

          <a-button class="param-clear" type="default" @click="clearParams"
            >重置
          </a-button>
        </a-button-group>
      </a-form>
    </div>
    <StatisticsResult ref="StatisticsResult" v-show="isHasData" />
  </div>
</template>

<script>
import StatisticsResult from "./StatisticsResult.vue";
export default {
  components: { StatisticsResult },
  data() {
    return {
      particularYear: undefined,
      datasetName: null,
      datasetNameList: undefined,
      isHasData: false,
      filednameList: undefined,
      filedname: undefined,
      statisticsdata: undefined,
      chartname: undefined,
      chartType: "bar",
      isShowFiled: false,
    };
  },
  computed: {
    Statisticsdata() {
      return this.$store.state.config.Statisticsdata;
    },
    StatisticsFiledName() {
      return this.$store.state.config.StatisticsFiledName;
    },
  },
  methods: {
    datatypesChange(index) {
      this.datasetName = "all";
      this.datatypesname = index;
      this.isShowFiled = true;
      this.filedname = null;
      let obj = this.datatypes[index];
      for (let keyname in obj) {
        this[keyname] = obj[keyname];
      }
      this.statisticsdata = {
        xkeyname: this.datasetCNameFN,
        ykeyname: this.DataLenthFN,
        yname: this.DataLenthFNYname,
        xname: "",
      };
      this.datasetNameList = this.statisticsdata.data = this.Statisticsdata[
        this.particularYear
      ][this.datasetsInfoFN].filter(
        (item) => this.datasetType == item[this.datasetTyeoFN]
      );
      this.datasetNameList = this.datasetNameList.filter(
        (item) => item[this.status] == "统计完成"
      );
    },
    datasetNameChange(index) {
      if (index == "all") {
        this.isShowFiled = true;
        this.datatypesChange(this.datatypesname);
        return;
      }

      if (this.datasetNameList[index][this.status] == "统计完成") {
        this.isShowFiled = false;
        this.filednameList = this.datasetNameList[index][this.SpecialCountFN];
        this.filedname = 0;
        this.statisticsdata = {
          xname: this.filednameList[0][this.filedCNameFN],
        };
        this.statisticsdata.data =
          this.filednameList[this.filedname][this.CountObjFN];
      } else {
        this.isShowFiled = true;
        this.filedname = null;
        this.statisticsdata = {};
      }
    },
    chartTypeChange(value) {
      this.chartType = value;
    },
    filednameChange(index) {
      this.statisticsdata = {
        xname: this.filednameList[index][this.filedCNameFN],
      };
      this.statisticsdata.data = this.filednameList[index][this.CountObjFN];
    },
    selectYearChange(index) {
      this.clearParams();
      this.particularYear = index;
      this.datatypesChange(0);
    },
    statistics() {
      if (!this.statisticsdata.data) {
        this.isHasData = false;
        this.$message.info("暂无统计数据");
        return;
      }
      this.isHasData = false;
      let self = this;
      if (this.statisticsdata) {
        this.$refs.StatisticsResult.dealstatisticsData(
          self.statisticsdata,
          this.chartType
        );
      } else {
        this.$message.info("暂未统计");
      }
      this.isHasData = true;
    },
    clearParams() {
      this.chartType = "bar";
      this.particularYear = 0;
      this.datasetNameList = this.Statisticsdata[this.particularYear][
        this.datasetsInfoFN
      ].filter(
        (item) =>
          item[this.status] != "暂未统计" && item[this.datasetCNameFN] != "NULL"
      );
      this.datasetName = "all";
      this.isHasData = false;

      this.datatypesChange(0);
    },
    setfiledName() {
      for (let key in this.StatisticsFiledName) {
        let obj = this.StatisticsFiledName[key];
        if (Array.isArray(obj)) {
          this.datatypes = obj;
          this.datatypesname = 0;
          let obja = this.datatypes[this.datatypesname];
          for (let keyname in obja) {
            this[keyname] = obj[keyname];
          }
        } else {
          for (let keyname in obj) {
            this[keyname] = obj[keyname];
            console.log(this[keyname]);
          }
        }
      }
    },
  },
  created() {
    this.setfiledName();
  },
  mounted() {
    this.particularYear = 0;
    this.datasetNameList = this.Statisticsdata[this.particularYear][
      this.datasetsInfoFN
    ].filter(
      (item) =>
        item[this.status] != "暂未统计" && item[this.datasetCNameFN] != "NULL"
    );
    this.datasetName = "all";
    this.datatypesChange(0);
    this.isHasData = false;
    this.chartType = "bar";
  },
};
</script>

<style></style>
